<template>
  <!-- 项目实施 - 1项目资源 -->
  <div class="project-resource">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card top-card">
          <div slot="header" style="margin: 0;">
            <card-title title="资源新增"></card-title>
          </div>
          <el-row :gutter="12">
            <el-col :span="8" v-for="(i, idx) in cardListData" :key="idx" class="card-group">
              <card-list :cardData="i" :idx="idx" @cardClick="addModal(idx)"></card-list>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="24" style="margin-top:16px;">
        <el-card class="box-card bottom-card">
          <div slot="header" style="margin: 0;">
            <card-title title="项目资源"></card-title>
          </div>
          <el-row :gutter="12">
            <el-col :span="24">
              <el-form :inline="true" :model="formData" label-position="right" label-width="90px">
                <el-row :gutter="12">
                  <el-col :span="16" v-if="showSearch == false">
                    <advancedFilter></advancedFilter>
                  </el-col>
                  <el-col :span="6" v-if="showSearch">
                    <el-form-item label="项目名称">
                      <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="showSearch">
                    <el-form-item label="资源名称">
                      <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="showSearch">
                    <el-form-item label="资源类型">
                      <el-select v-model="formData.sel" multiple clearable placeholder="请选择..." style="width: 100%;">
                        <el-option label="资源类型一" value="shanghai"></el-option>
                        <el-option label="资源类型二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="showSearch ? 6 : 8" style="text-align: right;">
                    <el-button type="primary">筛选</el-button>
                    <el-button @click="resetForm">重置</el-button>
                    <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="24">
              <el-row :gutter="12" style="display: inline-flex;width: 100%;">
                <el-col :span="4" :md="5" class="border-r">
                  <el-input v-model="treeSearch" class="tree-search" placeholder="搜索关键字" suffix-icon="el-icon-search"></el-input>
                  <el-tree class="cust-tree" node-key="id" :data="treeData" ref="tree" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
                </el-col>
                <el-col :span="20" :md="19">
                  <cust-act-table
                    ref="custActTable"
                    tableType="edit"
                    :list="tableData"
                    :colConfigs="customColumns"
                    @getDetail="getDetail"
                    @changePage="changePage"
                    @getSelectedRow="getSelectedRow"
                    :pageNum="page.pageNum"
                    :pageSize="page.pageSize"
                    :total="page.total"
                    showIdx
                    showAct
                    rKey="index"
                  ></cust-act-table>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog :title="modalTitle" class="btn-modal" :visible.sync="modalState" @close="closeModal" width="800px" :close-on-click-modal="false">
      <formName :text="dialogFormName"></formName>
      <formPart listTitle="基本信息" :modalTitle="modalType == 'add' || modalType == 'edit' ? 'EDIT-FORM' : '查看'" :formList="basicFormList"></formPart>
      <!-- <formPart listTitle="基本信息" :modalTitle="modalTitle" :formList="basicFormList"></formPart> -->
    </el-dialog>
  </div>
</template>

<script>
import { tableData1, customColumns1 } from './js/staticData';
import cardTitle from './components/title';
import formName from './components/formName';
import formPart from './components/formPart';
import cardList from './components/cardList';
import advancedFilter from './components/advancedFilter';
import custActTable from "./components/custActTable";
export default {
  name: "projectResource",
  components: { cardTitle, cardList, custActTable, advancedFilter, formName, formPart },
  data() {
    let self = this;
    return {
      cardListData: [
        {
          img: require('./images/card-blue.png'),
          line1: '材料新增',
          line2: '项目可用材料新增'
        },
        {
          img: require('./images/card-yellow.png'),
          line1: '工时新增',
          line2: '项目可用工时新增'
        },
        {
          img: require('./images/card-red.png'),
          line1: '成本新增',
          line2: '项目可用成本新增'
        }
      ],
      formData: {
        ipt1: '',
        ipt2: '',
        sel: []
      },
      treeSearch: '',
      showSearch: true,
      treeData: [
        {
          label: '资源类型',
          children: [
            { label: '苗木', id: 0},
            { label: '草皮', id: 1},
            { label: '人工', id: 2},
            { label: '设备', id: 3}
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      contentIdx: 0,
      customColumns: customColumns1,
      tableData: tableData1[0],
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      modalState: false,
      modalType: '',
      modalTitle: '',
      modalClass: 0,
      dialogFormName: '项目资源', 
      basicFormList: [],
      detailInfo: []
    };
  },
  watch: {
    tableData: {
      handler(n, o) {
        setTimeout(() => {
          document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
        }, 10)
      },
      deep: true
    },
    contentIdx(n) {},
    modalType(n){
      this.basicFormList.map(i => {
        if(n != 'add' && n != 'edit') {
          i.disabled = true
        } else {
          i.disabled = false
        }
      })
    },
    basicFormList: {
      handler(n, o) {},
      deep: true,
      immediate: true
    },
    modalClass(n){},
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData1[0];
      setTimeout(() => {
        document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
      }, 1500)
      this.customColumns = customColumns1;
    })
  },
  methods: {
    /**
     * @author Wrl
     * 点击卡片 - 新增
     */
    addModal(idx) {
      this.modalTitle = '新建';
      this.modalType = 'add';
      this.modalClass = idx;
      this.showModal();
    },
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 点击树形控件
     */
    handleNodeClick(data) {
      this.contentIdx = data.id;
      this.customColumns = customColumns1;
      this.tableData = tableData1[this.contentIdx];
    },
    /**
     * @author Wrl
     * 点击列表 - 修改
     */
    getDetail() {
      this.modalTitle = '修改';
      this.modalType = 'edit';
      this.modalClass = this.contentIdx;
      this.showModal()
    },
    /**
     * @author Wrl
     * 点击列表 - 查看
     */
    getSelectedRow(row) {
      this.detailInfo = row;
      this.modalTitle = '查看';
      this.modalClass = this.contentIdx;
      this.showModal()
    },
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal() {
      this.modalTitle = this.modalType == 'add' ? '新建' : this.modalType == 'edit' ? '修改' : '查看';
      this.basicFormList = [
        { l: '项目名称', v: '', prop: 'xmmc', type: this.modalType == 'add' || this.modalType == 'edit' ? 'inputIconR' : 'input', icon: { path:require('./images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12},
        { l: '资源名称', v: '', prop: 'zymc', type: 'input', span: 12},
        { l: '资源类型', v: '', prop: 'zylx', span: 6, type: this.modalType == 'add' || this.modalType == 'edit' ? 'select' : 'input', option: [{l: '材料', v: '0'},{l: '工时', v: '1'},{l: '成本', v: '2'}]},
        { l: '单位成本', v: '', prop: 'dwcb', type: 'input', span: 6},
        { l: '最大单位', v: '', type: 'input', span: 6},
      ]
      this.basicFormList.map(i => {
        if(this.modalType !== 'add') {
          i.v = this.detailInfo[i.prop];
        } else {
          i.v = '';
        }
      })
      this.$nextTick(() => {
        this.modalState = true;
      })
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal() {
      this.modalType = '';
      this.modalClass = 0;
      this.modalState = false;
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
  }
};
</script>
<style lang="scss" scoped>
  .project-resource {
    padding: 16px;
    ::v-deep {
      .el-form-item {
        width: 100%;
      }
      .el-form-item__content {
        width: calc(100% - 90px);
      }
    }
    .tree-search {
      width: 200px;
      ::v-deep .el-input__inner {
        border-radius: 20px;
      }
    }
    .cust-tree {
      margin-top: 16px;
    }
    .bottom-card {
      min-height: 100px;
    }
    ::v-deep {
      .el-dialog__header{
        padding: 20px 20px 0;
      }
      .el-dialog__body {
        padding: 10px 20px;
      }
      .el-dialog__headerbtn {
        z-index: 100;
      }
    }
  }
  .border-r {
    min-width: 220px;
    border-right: 1px solid #cccccc;
  }
</style>
